<template>
  <el-dialog
    :custom-class="'jxgl-dialog-vip-tips'"
    :visible.sync="innerVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="true"
    :append-to-body="true"
    :show-close="false"
    :top="'20vh'">
    <div class="vip-con">
      <template v-if="!isDelay">
        <div class="title-box">
          <div class="vip-title">{{ title }}</div>
          <div v-if="subTitle" class="vip-sub-title">{{ subTitle }}</div>
        </div>
        <div class="vip-body">
          <div v-if="isVip" class="vip-body-label">
            <p v-if="subTitle" class="delay-tips">{{ delayTips }}</p>
            <div v-else class="vip-body-label">可使用但不限于以下功能：</div>
          </div>
          <div v-else class="vip-body-label">失去以下功能使用资格：</div>
          <ul class="vip-body-val">
            <li :class="['vip-body-val-item', !isVip ? 'del-item' : '']" v-for="(vip, inx) in vips" :key="'vip_' + inx">
              <i class="el-icon-check"></i>
              <span class="vip-val-txt">{{ vip }}</span>
            </li>
          </ul>
        </div>
        <div class="vip-footer">
          <template v-if="isAdminRole">
            <div class="btn-box">
              <el-button v-if="isVip" type="primary" size="small" @click.stop="beginUse">知道了</el-button>
              <el-button v-if="vipDays < 8" type="primary" size="small" @click.stop="applyDelay">
                申请延期使用
              </el-button>
            </div>
            <div class="service-hotline-box">
              联系产品服务顾问：
              <a :href="'tel:' + hotline">{{ hotline }}</a>
            </div>
          </template>
          <template v-else>
            <el-button v-if="isVip" type="primary" size="small" @click.stop="beginUse">知道了</el-button>
          </template>

          <div v-if="!isVip" class="log-out">
            <el-button type="text" size="small" @click.stop="logout">退出登录</el-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="title-box vip-title">{{ hasDelayed ? '成功提交延期申请' : '完善信息' }}</div>
        <el-button class="close-btn" icon="el-icon-close" type="text" @click="closeDelay"></el-button>
        <el-form
          v-if="!hasDelayed"
          class="vip-body"
          ref="userInfo"
          size="small"
          label-width="150px"
          label-position="right"
          label-suffix="："
          hide-required-asterisk
          :model="userInfo"
          :rules="rules">
          <div class="vip-body-label center-label">请补充完善姓名和身份信息</div>
          <el-form-item label="姓名" prop="userName">
            <el-input
              v-model.trim="userInfo.userName"
              autocomplete="off"
              show-word-limit
              :maxlength="10"
              clearable
              placeholder="请输入姓名，最多10个字"></el-input>
          </el-form-item>
          <el-form-item label="政府/社会组织" prop="orgName">
            <el-input
              v-model.trim="userInfo.orgName"
              autocomplete="off"
              :maxlength="50"
              show-word-limit
              clearable
              placeholder="请输入政府/社会组织名称，最多50个字"></el-input>
          </el-form-item>
        </el-form>
        <div v-else class="vip-body">
          <div class="vip-body-label delayed-label">稍后产品服务顾问将联系您，请保持电话畅通并注意接听电话。</div>
          <div class="service-hotline-box">
            如有问题，请直接联系产品服务顾问：
            <a :href="'tel:' + hotline">{{ hotline }}</a>
          </div>
        </div>
        <div class="vip-footer">
          <div class="btn-box">
            <el-button v-if="!hasDelayed" type="primary" size="small" @click.stop="onSubmit">完成</el-button>
            <el-button v-else type="primary" size="small" @click.stop="logout">好的</el-button>
          </div>
        </div>
      </template>
    </div>
  </el-dialog>
</template>
<script>
import { saveTenantDelayRecord } from '@api/modules/system'
import { formatDate } from '@utility/utility'
import { mapGetters } from 'vuex'
export default {
  name: 'VipDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      vips: [
        '工作纪实：应用语音识别、自然语言处理技术，提供方便快捷的纪实功能',
        '日常管理：实现日常考勤统计、请销假登记审批等',
        '平时考核：内置平时考核模块，自动输出平时考核登记表',
        '机构管理：实现部门、用户、角色、职位权限等内容的自定义管理',
        '预置模型：预置指标模型、考核模板，可以一键勾选使用',
        '模型自定义：自定义评价方式、评价审批流程、指标体系，建立个性化考核模板和指标模型',
        '自动归集：考核数据自动归集汇总，实时查看考核进度，管控考核流程',
        '绩效画像：考核结束后，系统自动形成个人绩效分析报告，为个人绩效精准画像',
        '......',
      ],
      hotline: '0371-65356670-5141',
      isDelay: false,
      hasDelayed: false,
      userInfo: {
        userId: localStorage.pskh_userId,
        userName: '',
        orgName: '',
      },
      rules: {
        userName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        orgName: [{ required: true, message: '政府/社会组织不能为空', trigger: 'blur' }],
      },
      title: '',
      subTitle: '',
      innerVisible: false,
    }
  },
  computed: {
    ...mapGetters(['leftNavMenus']),
    ...mapGetters('role', ['isOperateRole', 'isAdminRole', 'isMainRole', 'isOrgRole']),
    vipDays() {
      return this.$store.getters.vipDays
    },
    showClose() {
      return this.isDelay
    },
    isVip() {
      return this.vipDays > 0
    },
    delayTips() {
      let tips = ''
      if (this.vipDays > 7) {
        tips = `账号试用日期剩余 ${this.vipDays} 天，可以放心使用以下功能：`
      } else if (this.vipDays > 0) {
        tips = '账号试用日期即将到期，请申请延期并继续使用以下功能：'
      } else {
        tips = '账号试用日期已到期，请申请延期使用'
      }
      return tips
    },
  },
  watch: {
    visible(val) {
      this.innerVisible = val
    },
  },
  created() {
    if (this.isAdminRole) {
      this.initVip()
    }
  },
  methods: {
    beginUse() {
      this.closeDialog()
    },
    closeDialog() {
      this.$emit('close', false)
      this.isDelay = false
      this.hasDelayed = false
      this.innerVisible = false
      this.$emit('update:visible', false)
    },
    logout() {
      if (!this.isVip) {
        this.$confirm('确定要退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.closeDialog()
            localStorage.removeItem('token')
            localStorage.clear()
            sessionStorage.clear()
            this.$store.commit('clearCommonAll')
            this.$router.replace('/login')
          })
          .catch(() => {})
      } else {
        this.closeDialog()
      }
    },
    onSubmit() {
      this.$refs.userInfo.validate(valid => {
        if (valid) {
          this.saveDelayRecord()
        }
      })
    },
    async saveDelayRecord() {
      const { status } = await saveTenantDelayRecord(this.userInfo)
      if (status === 200) {
        this.isDelay = true
        this.hasDelayed = true
      }
    },
    applyDelay() {
      this.isDelay = true
    },
    closeDelay() {
      if (this.hasDelayed) {
        this.logout()
      } else {
        this.isDelay = false
        this.hasDelayed = false
      }
    },
    getExpiredTime() {
      let expiredTime = ''
      if (localStorage.PSKH_USERINFO && JSON.parse(localStorage.PSKH_USERINFO)) {
        const userInfo = JSON.parse(localStorage.PSKH_USERINFO)
        expiredTime = userInfo.endTime || ''
        expiredTime = expiredTime ? formatDate(new Date(expiredTime), 'yyyy-MM-dd hh:mm') : '已'
      }
      return expiredTime
    },
    initVip() {
      const expiredTime = this.getExpiredTime()
      if (this.isFirstLogin) {
        this.subTitle = this.vipDays > 0 ? '' : `（${expiredTime}到期）`
        this.title = this.vipDays > 0 ? '👏 终于等到您，欢迎使用“互联网+公务员考核”在线平台' : '💎试用体验•已到期'
        this.innerVisible = true
      } else {
        this.subTitle = `（${expiredTime}到期）`
        this.title = this.vipDays > 0 ? `💎试用体验•剩余 ${this.vipDays} 天可用` : '💎试用体验•已到期'
        this.innerVisible = this.vipDays < 8
      }
    },
    // showVipTips(bool) {
    //   const expiredTime = this.getExpiredTime()
    //   if (this.vipDays > 0) {
    //     this.title = `💎试用体验•剩余 ${this.vipDays} 天可用`
    //   } else {
    //     this.title = '💎试用体验•已到期'
    //   }
    //   this.expiredTime = `（${expiredTime}到期）`
    //   this.showVip = bool
    // },
  },
}
</script>
<style lang="scss" scoped>
.jxgl-dialog-vip-tips {
  ::v-deep &.el-dialog {
    width: 600px;
    border-radius: 8px;
    .el-dialog__body {
      padding: 0 20px 30px;
    }
  }
  .vip-con {
    display: flex;
    flex-direction: column;
    align-items: center;
    .title-box {
      margin-bottom: 30px;
    }
    .vip-title {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
    .close-btn {
      position: absolute;
      right: 20px;
      top: 10px;
    }
    .vip-sub-title {
      margin-top: 10px;
      text-align: center;
    }
    .vip-body {
      min-width: 50%;
      margin: 0 auto;
      margin-bottom: 20px;
      .delay-tips {
        text-align: center;
        font-size: 14px;
        margin-bottom: 10px;
      }
      &-label {
        font-size: 14px;
        margin-bottom: 20px;
        color: #666;
        text-align: left;
        &.delayed-label {
          margin-top: 30px;
        }
        .red {
          color: #e25353;
        }
        .larger-txt {
          font-size: 16px;
        }
      }
      &.el-form {
        min-width: 100%;
        .vip-body-label {
          margin-bottom: 30px;
          &.center-label {
            text-align: center;
          }
        }
      }
      .service-hotline-box {
        margin-bottom: 30px;
        text-align: center;
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        a {
          color: #777;
        }
      }
      .vip-body-val-item {
        margin-left: 20px;
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 10px;
        color: #666;
        &.del-item {
          text-decoration: line-through;
        }
        i.el-icon-check {
          font-size: 16px;
          padding-right: 10px;
        }
      }
    }

    .vip-footer {
      .service-hotline-box {
        text-align: center;
        color: #888;
        text-align: center;
        margin-top: 10px;
        font-size: 12px;
        a {
          color: #777;
        }
      }
      .btn-box {
        text-align: center;
        .el-button {
          padding: 10px 25px;
          min-width: 100px;
        }
      }
      .log-out {
        margin-top: 10px;
        text-align: center;
      }
    }
  }
}
</style>
